<template>
  <div>
    <div class="wrapper">
      <miheader title="购物车">
        <div slot="back">
          <span class="back"
                @click="back">返回</span>
        </div>
      </miheader>
      <div class="container"
           ref="container">
        <div class="wrapper">
          <cart-item v-for="(good,index) in cartList"
                     :key="index"
                     :good="good"></cart-item>
        </div>
      </div>
    </div>
    <!-- 底部结算模块 -->
    <price-footer></price-footer>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import miheader from '../components/home/miheader.vue'
import PriceFooter from '../components/cart/pricefooter'
import CartItem from '../components/cart/cartItem'
import { mapState } from 'vuex'
export default {
  components: { miheader, PriceFooter, CartItem },
  methods: {
    back () {
      this.$router.push('/home')
    },
    _initScroll () {
      const container = this.$refs.container
      this.scroll = new BScroll(container)
    }
  },
  computed: {
    ...mapState(['cartList'])
  },
  mounted () {
    this._initScroll()
    this.$store.dispatch('setData')
  }

}
</script>

<style lang="less" scoped>
.container {
  position: absolute;
  top: 50px;
  overflow: hidden;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
}
.wrapper {
  padding-bottom: 50px;
}
</style>
